<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-6</title>
    <style type="text/css">
        ul,li{margin:0;padding:0;list-style-type:none;}
        #imgList{width:700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}
        #imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}
        #imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}
        #imgList li.current img{opacity:1;filter:alpha(opacity=100);}
    </style>
</head>
<body>
<ul id="imgList">
    <li class=""><img src="../img/1.jpg"></li>
    <li class=""><img src="../img/2.jpg"></li>
    <li class=""><img src="../img/3.jpg"></li>
    <li class=""><img src="../img/4.jpg"></li>
    <li class=""><img src="../img/5.jpg"></li>
    <li class=""><img src="../img/6.jpg"></li>
    <li class=""><img src="../img/7.jpg"></li>
    <li class=""><img src="../img/8.jpg"></li>
    <li class=""><img src="../img/9.jpg"></li>
    <li class=""><img src="../img/10.jpg"></li>
</ul>

<script type="text/javascript">

    //思路:
    //通过透明度的变化实现效果
    //1:注意代码a  清除元素class值
    //2:注意代码b  当前元素添加class值
    window.onload = function(){
        var lis = document.getElementsByTagName("li");
        var size = lis.length;
        for(var i=0;i<size;i++){

            lis[i].onmouseover = function(){
                //a:当空所有列表样式
                for(p in lis)lis[p].className = "";
                //b:当前元素添加current样式
                this.className = "current";

            };

        }
    };
</script>
</body>
</html>